<template>
  <v-tr
    :isHover="isHover"
    @mouseover="changeHoverRecord">
    <v-td
      v-for="columnName in tableList"
      :key="columnName"
      :columnStyle="columnName | columnStyle(columnsWidth, columns)"
    >
      <input
        v-if="columns[columnName].render && columns[columnName].render.form && columns[columnName].render.form.type === 'input'"
        class="input-sm"
        style="width:100%;text-align:center;"
        type="text"
        placeholder=""
        width="100%"
        size="sm"
        v-model="data[columnName]"
        @change="columns[columnName].render.form.func(data[columnName], data)">
      <info-render
        v-else
        :full="data"
        :recordIndex="recordIndex"
        :data="data[columnName]"
        :column="columns[columnName]"
        :minLength="columns[columnName].minLength"
        :width="columnsWidth[columnName]"
      >
        <template slot-scope="props">
          <div v-if="columns[columnName].html" v-html="props.content"></div>
          <div v-else-if="columns[columnName].link" class="columns-render">
            <router-link :to="columns[columnName].link">
              <el-button type="text">{{ props.content }}</el-button>
            </router-link>
          </div>
          <div class="text-overflow" v-else>{{props.content}}</div>
        </template>
      </info-render>
    </v-td>
    <v-td
      v-if="operationList && operationList.length>0"
      :columnStyle="operationWidth | operationStyle">
      <ButtonList
        v-if="buttonList.length>0"
        :buttonList="buttonList"
      />
      <span v-else>
        -
      </span>
    </v-td>
  </v-tr>
</template>

<script>
import InfoRender from '@/components/InfoRender'
import VTbody from '@/components/VTable/VTbody'
import VTr from '@/components/VTable/VTr'
import VTd from '@/components/VTable/VTd'
import ButtonList from '@/components/ButtonList'

export default {
  name: 'DatatablesRecord',
  components: {
    InfoRender,
    VTbody,
    VTr,
    VTd,
    ButtonList
  },
  props: {
    recordIndex: Array,
    mainColumn: String,
    operationList: Array,
    operationWidth: Number,
    columns: Object,
    columnsWidth: Object,
    level: {
      type: Number,
      default: 0
    },
    tableList: {
      type: Array,
      default: () => []
    },
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    hoverRecord: {
      type: String | Number
    }
  },
  data () {
    return {}
  },
  computed: {
    isHover () {
      const index = Number(this.recordIndex) + 1
      return this.hoverRecord === index
    },
    levelStyle () {
      return {
        'margin-left': this.level * 28 + 'px'
      }
    },
    buttonList () {
      return this.operationList.filter(operation => {
        return !operation.isShow || operation.isShow(this.data, operation)
      }).map(operation => {
        return {
          ...operation,
          size: 'xs',
          funcProps: {
            ...operation.funcProps,
            data: this.data
          }
        }
      })
    }
  },
  filters: {
    columnStyle (columnName, columnsWidth, columns) {
      return {
        width: columnsWidth[columnName] + 'px',
        ...columns[columnName].style
      }
    },
    operationStyle (width) {
      return {
        'width': width + 'px'
      }
    }
  },
  methods: {
    changeHoverRecord () {
      const index = Number(this.recordIndex) + 1
      this.$emit('changeHoverRecord', index)
    }
  }
}
</script>

<style scoped lang="sass">
.fa
  width: 10px
.text-overflow
  text-overflow: ellipsis
  white-space: nowrap
  overflow: hidden
.text-break
  word-break: break-all
  word-wrap: break-word
</style>
